{% extends 'base.html' %}
{% block title %}Ingress{% endblock %}
{% block nav-item-3 %}layui-nav-itemed{% endblock %}
{% block nav-child-3-2 %}layui-this{% endblock %}
{% block content %}
class="layui-breadcrumb">
  <a href="#">首页</a>
  <a href="#">工作负载</a>
  <a><cite>Ingress_create</cite></a>
</span>
    {% csrf_token %}
<div class="layui-card">
        <div class="layui-card-body">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend>创建Ingress</legend>
        </fieldset>

        <form class="layui-form " onclick="return false">

            <div class="layui-form-item">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                  <input type="text" name="name" lay-verify="required" lay-reqtext="名称是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">命名空间：</label>
                <div class="layui-input-block">
                <select name="namespace"  lay-verify="required" id="ns">
                </select>
                </div>
             </div>

            <div class="layui-form-item">
                <label class="layui-form-label">域名：</label>
                <div class="layui-input-block">
                  <input type="text" name="host" lay-verify="required" lay-reqtext="域名是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">路径：</label>
                <div class="layui-input-block">
                  <input type="text" name="path" value="/" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">关联Svc：</label>
                <div class="layui-input-block">
                  <input type="text" name="svc_name" lay-verify="required" lay-reqtext="Svc名称是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">Svc端口：</label>
                <div class="layui-input-block">
                  <input type="text" name="svc_port" lay-verify="required" lay-reqtext="Svc端口是必填项，不能为空！" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit="" lay-filter="btn">立即提交</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>

        </div>
    </div>
{% endblock %}
{% block js %}
<script>
    // 获取当前命名空间
    var storage = window.sessionStorage;
    var namespace = storage.getItem("namespace");

    layui.use(['table','form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        $("#ns").append('<option value=' + namespace + ">" + namespace + '</option>');
        //$("#ns").attr("disabled","disabled");
        form.render();  // 重新渲染，这个一定要放在最后这个位置

        // 监听提交
        form.on('submit(btn)', function (data) {
            data = data.field;
            csrf_token = $('[name="csrfmiddlewaretoken"]').val();
            data['csrfmiddlewaretoken'] = csrf_token;
            $.ajax({
                 url: '{% url "service_api" %}',
                type: 'POST',
                data: data,
                // 提交成功回调函数
                success: function (res) {
                    if (res.code == '0') {
                        layer.msg(res.msg, {icon:6});
                    } else {
                        layer.msg(res.msg, {icon:5})
                    }
                },
                // 访问接口失败函数
                error: function (res) {
                    layer.msg("服务器接口异常！",{icon:5})
                }
            })
        });
    });
</script>
{% endblock %}